﻿@using Res = ViewRes.Song.DetailsStrings;

<div data-bind="dialog: {
	 autoOpen: false, 
	 modal: true, 
	 width: 300, 
	 position: { my: 'left top', at: 'left bottom', of: $('#addToListLink') } }, 
	 dialogButtons: [{ text: @("'" + ViewRes.SharedStrings.Save + "'"), click: songListDialog.addSongToList }],
	 dialogVisible: $root.songListDialog.dialogVisible, with: songListDialog" style="display:none" title="@Res.AddToList" class="song-add-to-list-dialog">

	<div class="btn-group">
		<a class="btn btn-small" data-bind="css: { active: tabName() === 'Personal' }, click: function() { tabName('Personal'); }, visible: personalLists().length" href="#">
			@Res.ListsTabPersonal
		</a>
		<a class="btn btn-small" data-bind="css: { active: tabName() === 'Featured' }, click: function() { tabName('Featured'); }, visible: featuredLists().length" href="#">
			@Res.ListsTabFeatured
		</a>
		<a class="btn btn-small" data-bind="css: { active: tabName() === 'New' }, click: function() { tabName('New'); }" href="#">
			@Res.ListsTabNew
		</a>
	</div>

	<select data-bind="options: songLists, optionsText: 'name', optionsValue: 'id', value: selectedListId, visible: tabName() !== 'New'" size="6" class="add-to-list-song-lists"></select>

	<div data-bind="visible: tabName() === 'New'">
		<label>@Res.NewListName</label>
		<input type="text" data-bind="textInput: newListName" maxlength="200" class="add-to-list-name" />
	</div>

	<label>@Res.Notes</label>
	<input type="text" data-bind="textInput: notes" maxlength="200" class="add-to-list-notes" />

</div>
